<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="icon" href="images/icon.png">
        <style type="text/css">
          *{
          	padding:0;
          	margin:0;
          }
          li{
          	list-style:none;
          }
          input[button]{
          	/* 初始化输入框，去掉边框，然后自己设置。 */
          	border:none;
          }
          .box{
         	height:900px;
          }
          .nav{
          	height: 50px; 
          	line-height:50px;
          	margin:20px 50px;
			background:url("images/onplustu.png") no-repeat;
          }
          .nav ul{
			margin-left:300px;
          }
          .nav li{
			float:left;
          	margin-left:80px;
          }
          .nav a{
          	text-decoration:none;
          	color:black;
          	font:15px 微软雅黑;

          }
          .bot{
          	height:3000px;
          	/* background-color:#E1E0E0; */
          }
		  
          .lisr{
          	height: 500px;
          	background-color:#E1E0E0;
          	/* margin:80px 35px; */
          }
          .lisr li{
          	height: 390px;
          	float:left;
          	margin: 35px 0 35px 30px;
          	background-color:#FFFFFF;
          }
          .lisr a{
          	text-decoration:none;
          	color:black;
          }
          .fontset1{
			margin-top:39px;
			margin-left:25px;
          }
          .fontset1 p{
          	margin-top: 5px;
          	font-family:微软雅黑;
          }
          .shot{
          	height: 622px;
          	width: 1283px;
          	line-height:622px;
          	background: url("images/shot on oneplus.jpg");
          }
          .shot h1{
          	color:white;
          	font:normal 60px 微软雅黑;
          	text-align:center;
          	padding-top:230px;
          }
          .shot input{
          	font:normal 15px 微软雅黑;
          	position:absolute;
			left:580px;
			margin-top:20px;
			padding:8px 30px;
			border:1px solid white;
			background-color:transparent;
          }
          .withy{
          	margin:80px 25px;
			height: 310px;
			/* background-color:#FFFFFF; */
          }
          .withy li{
          	/* height:408px; */
          	width:300px;
			margin-left:5px;
			float:left;
          }
          .withy a{
          	margin-top:10px;
			color:black;
          	text-decoration:none;
        	float:left;
			/* background: url("images/charge.png") no-repeat; */
          }
          .shouhou{
          	height:150px;
          	margin-top:30px;
			padding-left:55px;
			border-bottom:1px solid #E1E0E0;
          }
          .shouhou li{
          	height: 100px;
          	padding:15px 95px 0 65px;
          	text-align:center;
			background-color:#FFFFFF;
          	float:left;
          }
          .shouhou img{
          	padding-left:18px;
          	margin-bottom:10px;
          }
          .shouhou a{
          	text-align:center;
          	text-decoration:none;
          }
          .shouhou h3{
          	color:gray;
          	padding-left:10px;
          }
		  .finel{
			height: 200px;
		  	padding:60px;
		  	float:left;
		  	text-align:center;

		  }
		  .finel dd{
			position:absolute;
			left:10px;
		  }
		  .finel dl{
		  	margin-top:10px;
		  }
		  .finel h2,h3{
		  	color:gray;
		  }
		  .service{
		  	margin-top:60px;
		  	position:absolute;
		  	right:100px;
		  }
		  .service h1{
		  	color:gray;
			font-family:微软雅黑;
		  }
		  .service p{
		  	color:gray;
			font-family:微软雅黑;
		  }
		  .service input{
		  	font: normal 15px 微软雅黑;
			/* background-color:; */
		  	border:1px solid gray;
		  	margin-top:20px;
			padding:15px 70px;
			border:2px solid white;
		  }
        </style>
    </head>
    <body>
    	<div class="box">
    	<!-- 导航栏 -->
    		<div class="nav">
    			<ul>
    				<li><a href="#">一加手机3T</a></li>
    				<li><a href="#">商城</a></li>
    				<li><a href="#">博客</a></li>
    				<li><a href="#">服务</a></li>
    				<li><a href="#">论坛</a></li>
    			</ul>
    		</div>
    		<!-- 大图片 -->
    		<div class="bot">
	    		<div class="content">
	    			<img src="images/Pro1.png" height="622" width="1283">
	    		</div>
	    		<!-- 配件 -->
	    		<div class="withy">
	    			<ul>
	    				<li>
	    					<a href="#">
	    					<h2>黑檀，稀有才值得拥有</h2>
	    					<img src="images/back.png" height="308" width="300">
	    					</a>
	    				</li>
	    					<a href="#">
	    					<h2>急速闪充</h2>
	    					<img src="images/charge.png" height="308" width="300">
	    					</a>
	    				</li>
	       				<li>
	    					<a href="#">
	    					<h2>钢化玻璃</h2>
	    					<img src="images/skin.png" height="308" width="300">
	    					</a>
	    				</li>
	    				<li>
	    					<a href="#">
	    					<h2>优雅，不止于行</h2>
	    					<img src="images/bag.png" height="308" width="300">
	    					</a>
	    				</li>

	    			</ul>
	    		</div>
    		    <!-- 一加摄影 -->
    			<div class="shot">
    				<h1>Shot On OnePlus</h1>
    				<input type="button" value="我要参加">
	    			<!--  <img src="images/shot on oneplus.jpg" height="622" width="1283">  -->
	    		</div>
	    		<div class="lisr">
	    			<ul>
	    				<li>
	    					<a href="#">
	    					<img src="images/pro4.png" height="237" width="385">
		    				<div class="fontset1">
		    					<h4>博客</h4>
		    					<p>OnePlus 2016年度获奖与荣膺</p>
		    				</div>
	    				    </a>
	    				</li>
	    				<li>
	    					<a href="#">
	    					<img src="images/pro5.png" height="237" width="385">
		    				<div class="fontset1">
		    					<h4>视频</h4>
		    					<p>一加手机3T媒体沟通会</p>
		    				</div>
	    				    </a>
	    				</li>
	    				<li>
	    					<a href="#">
	    					<img src="images/pro6.png" height="237" width="385">
		    				<div class="fontset1">
		    					<h4>新闻</h4>
		    					<p>OnePlus3T 全球媒体测评大集合</p>
		    				</div>
	    				    </a>
	    				</li>
	    			</ul>
	    		</div>
	    		<!-- 售后 -->
	    		<div class="shouhou">
	    			<ul>
	    				<li>
	    					<a href="#">
	    					<img src="images/ding.png" height="76" width="69">
	    					<h3>1小时售后拍单响应</h3>
	    					</a>
	    				</li>
	    				<li>
	    					<a href="#">
	    					<img src="images/day.png" height="76" width="69">
	    					<h3>7天无理由退货</h3>
	    					</a>
	    				</li>
	    				<li>
	    				  <div>
	    					<a href="#">
	    					<img src="images/tuihuo.png" height="76" width="69">
	    					<h3>15天退货保障</h3>
	    					</a>
	    				  </div>
	    				</li>
	    				<li> 
	    					<a href="#">
	    					<img src="images/huanhuo.png" height="76" width="69">
	    					<h3>30天换货保障</h3>
	    					</a>
	    				</li>
	    			</ul>
	    		</div>
	    		<!-- 售后结束 -->
	    		<!-- 自定义列表 -->
	    		<div class="finel">
	    			<dd>
	    				<dt><h2>一加产品</h2></dt>
	    				<dl><h3>一加手机3T</h3></dl>
	    				<dl><h3>一加手机3</h3></dl>
	    			</dd>
	    		</div>
	    		<div class="finel">
	    			<dd>
	    				<dt><h2>关于一加</h2></dt>
	    				<dl><h3>了解一加</h3></dl>
	    				<dl><h3>加入一加</h3></dl>
	    				<dl><h3>H2OS</h3></dl>
	    			</dd>
	    		</div>
	    		<div class="finel">
	    			<dd>
	    				<dt><h2>服务支持</h2></dt>
	    				<dl><h3>自助服务</h3></dl>
	    				<dl><h3>技术支持</h3></dl>
	    				<dl><h3>售后服务</h3></dl>
	    				<dl><h3>一加加多保</h3></dl>
	    			</dd>
	    		</div>
	    		<!-- 自定义列表结束 -->
	    		<div class="service">
	    			<h1>400-888-1111</h1>
	    			<input type="button" value="在线客服">
	    		</div>
    		</div>
    		<!-- 大图片结束 -->
    	</div>
    	<!-- box结束 -->
    </body>
</html>